/* 用法 */

// 定义不带参数
// @mixin ellipsis {
//   overflow: hidden;
//   text-overflow: ellipsis;
//   white-space: nowrap;
// }

// 使用
// div{
//   @include ellipsis
// };

// 定义带参数
// @mixin flex($justifyContent: flex-start, $alignItems: flex-start) {
//   display: flex;
//   align-items: $alignItems;
//   justify-content: $justifyContent;
// }

// 使用
// div{
//   @include flex(center, center);
// }

/*单条border样式*/
@mixin border-1px($color, $direction) {
	position: relative;
	border: none;

	&::after {
		content: "";
		position: absolute;
		background: $color;

		@if $direction==left {
			left: 0;
			top: 0;
			height: 100%;
			width: 2px;
			transform: scaleX(0.5);
			transform-origin: left 0;
		}

		@if $direction==right {
			right: 0;
			top: 0;
			height: 100%;
			width: 2px;
			transform: scaleX(0.5);
			transform-origin: right 0;
		}

		@if $direction==bottom {
			bottom: 0;
			left: 0;
			width: 100%;
			height: 2px;
			transform: scaleY(0.5);
			transform-origin: 0 bottom;
		}

		@if $direction==top {
			top: 0;
			left: 0;
			width: 100%;
			height: 2px;
			transform: scaleY(0.5);
			transform-origin: 0 top;
		}
	}
}

/*四条border样式 应该还有问题*/
@mixin all-border-1px($color, $radius) {
	position: relative;
	border: none;

	&::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		border: 1px solid $color;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
	}
}

/* 美化滚动条 */
@mixin base-scrollbar {
	&::-webkit-scrollbar {
		width: 13px;
		height: 13px;
	}

	&::-webkit-scrollbar-thumb {
		background-color: rgba(0, 0, 0, 0.4);
		background-clip: padding-box;
		border: 3px solid transparent;
		border-radius: 7px;
	}

	&::-webkit-scrollbar-thumb:hover {
		background-color: rgba(0, 0, 0, 0.5);
	}

	&::-webkit-scrollbar-track {
		background-color: transparent;
	}

	&::-webkit-scrollbar-track:hover {
		background-color: #f8fafc;
	}
}

/* 多行打点展示 */
@mixin row-dot-show($len) {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: $len;
}

// 设置border
@mixin triangle($width, $height, $color, $direction) {
	$width: $width/2;
	$color-border-style: $height solid $color;
	$transparent-border-style: $width solid transparent;
	height: 0;
	width: 0;

	@if $direction==up {
		border-bottom: $color-border-style;
		border-left: $transparent-border-style;
		border-right: $transparent-border-style;
	} @else if $direction==right {
		border-left: $color-border-style;
		border-top: $transparent-border-style;
		border-bottom: $transparent-border-style;
	} @else if $direction==down {
		border-top: $color-border-style;
		border-left: $transparent-border-style;
		border-right: $transparent-border-style;
	} @else if $direction==left {
		border-right: $color-border-style;
		border-top: $transparent-border-style;
		border-bottom: $transparent-border-style;
	}
}
